<template>
  <el-scrollbar class="h-full">
    <el-form
      v-loading="loading"
      class="flex flex-col items-start gap-y-4"
      label-position="top"
    >
      <QuoteCard
        header="用户端SEO站内优化"
        description="用户控制台、管理端浏览器标题及系统名称展示"
      >
        <div class="max-w-[400px] ml-2">
          <el-form-item class="mb-8">
            <template #label>
              <div class="text-black">首页标题</div>
              <small class="text-info text-xs">
                最先出现的词语权重最高，以英文逗号隔开，建议设置 28 ~ 35 个字符
              </small>
            </template>
            <el-input
              v-model="formState.title"
              placeholder="请输入首页标题"
            ></el-input>
          </el-form-item>
          <el-form-item class="mb-8">
            <template #label>
              <div class="text-black">关键字</div>
              <small class="text-info text-xs">
                搜索关键字，以英文逗号隔开，应限制在 6 ~ 8 个关键字左右
              </small>
            </template>
            <el-input
              v-model="formState.keyword"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item class="mb-8">
            <template #label>
              <div class="text-black">网站说明</div>
              <small class="text-info text-xs whitespace-nowrap">
                作为网站的总体业务和主题概括，补充在title 和
                keywords中未能表述的说明
              </small>
            </template>
            <el-input
              v-model="formState.description"
              placeholder="请输入网站说明"
            ></el-input>
          </el-form-item>
        </div>
        <div class="-ml-2">
          <el-divider />
          <el-button type="primary" @click="handleSave">保存配置</el-button>
        </div>
      </QuoteCard>
    </el-form>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { QuoteCard } from '@/components/application'
import ToastUtils from '@/utils/toast'

const formState = reactive({
  title: '',
  keyword: '',
  description: ''
})

const loading = ref(false)

onMounted(() => {
  loading.value = true
  configInfoApi({})
    .then(res => {
      formState.title = res.website_seo?.title as string
      formState.keyword = res.website_seo?.keyword as string
      formState.description = res.website_seo?.description as string
    })
    .finally(() => {
      loading.value = false
    })
})

const handleSave = () => {
  loading.value = true
  editConfigApi({
    website_seo: formState
  })
    .then(() => {
      ToastUtils.success('修改成功')
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
